<template>
  <div class="hello">
    <ImageTop></ImageTop>


    <div class="container-fluid mt-3" >
      <div class="card mt-2">
        <div class="card-body">
          <b-input-group size="" prepend="手机号：" class="mb-3">
            <b-form-input placeholder="请输入手机号" v-model="phone"></b-form-input>
          </b-input-group>

          <b-input-group size="" prepend="昵称：" class="mb-3">
            <b-form-input placeholder="请输入昵称" v-model="username"></b-form-input>
          </b-input-group>

          <b-input-group size="" prepend="性别：" class="mb-3">
            <select class="form-control" v-model="sex">
              <option value="1">男</option>
              <option value="2">女</option>
            </select>
          </b-input-group>

          <b-input-group size="" prepend="生日：" class="mb-3">
            <input type="date" class="form-control" v-model="birthday">
          </b-input-group>

          <b-input-group size="" prepend="密码：" class="mb-3">
            <b-form-input placeholder="请输入密码" v-model="password"></b-form-input>
          </b-input-group>

          <b-input-group size="" prepend="确认密码：" class="mb-3">
            <b-form-input placeholder="请再次输入密码确认" v-model="checkPassword"></b-form-input>
          </b-input-group>

          <b-input-group size="" prepend="验证码：" class="mb-3">
            <b-form-input placeholder="请输入图形验证码" v-model="captchaCode"></b-form-input>
          </b-input-group>

          <div class="form-inline mb-3">
            <img v-bind:src="captchaImg" class="form-control col-7 p-0" style="height: 45px">
            <button class="btn btn-light col-4 offset-1" style="height: 45px" v-on:click="getCaptchaBase64">换一个</button>
          </div>

          <div class="mb-3">
            <b-button variant="success" class="col-12" id="register" v-on:click="register"><i class="bi bi-check-square" ></i> 注册</b-button>
            <b-button variant="link" class="col-12" id="toLogin" @click="$router.push('/')"> 已是会员，立即登录>>></b-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import $ from "jquery/dist/jquery"
  import axios from "axios";
  import service from "@/utils/axios";
  export default {
    name: 'HelloWorld',
    data () {
      return {
        phone: "",
        username: "",
        password: "",
        checkPassword: "",
        sex: 1,
        birthday: "",
        captchaImg: "",
        captchaCode: "",
        captchaId: ""
      }
    },
    methods: {
      getCaptchaBase64(){
        axios.get("http://localhost:8081/captcha/generateCaptcha").then(data => {
          this.captchaImg = data.data.data.captchaImg;
          this.captchaId = data.data.data.captchaId;
        });
      },
      register(){
        service.post("/register",{
          "phone": this.phone,
          "username": this.username,
          "password": this.password,
          "checkPassword": this.checkPassword,
          "sex": this.sex,
          "birthday": this.birthday,
          "captchaCode": this.captchaCode,
          "captchaId": this.captchaId
        }).then(data => {
          if (data.data.code === 200){
            alert("成功");
            this.$router.push("/")
          }else {
            alert("失败");
          }

        });
      }
    },created() {
      this.getCaptchaBase64()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .container-fluid{
    background-color: #F8F9F9;
  }
</style>
